<template>
  <div>
    <myDivider name="机构管理"></myDivider>
    <el-page-header @back="goBack" content="详情">
    </el-page-header>
    <div class="breadcrumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-model="breadcrumbsData">
        <el-breadcrumb-item v-for="item in breadcrumbsData" :key="item.id" :label="item.shortName"> <a
            @click.prevent="tiktak(item.id)">{{ item.shortName }}</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="wholePage">

      <!-- 详情 -->
      <el-form ref="insertForm" :model="detailForm" label-width="80px" :inline="true" :rules="insertRules">
        <el-form-item label="名称:" :label-width="formLabelWidth" class="formItemStyle" prop="shortName">
          <el-input size="small" disabled v-model="detailForm.shortName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="超级管理员:" :label-width="formLabelWidth" class="formItemStyle">
          <!-- <el-select disabled v-model="detailForm.superAdministratorId" filterable placeholder="请选择" style="width: 262px;"
            @filter-method="getFatherAgenciesOptionData(name)">
            <el-option v-for="item in superAdministratorIdData" :key="item.type" :label="item.name" :value="item.type">
            </el-option>
          </el-select> -->
          <el-input size="small" disabled v-model="detailForm.superAdministratorName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="机构类型:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select size="small" disabled v-model="detailForm.type" placeholder="请选择" style="width: 262px;">
            <el-option v-for="item in fatherAgenciesOptionData" :key="item.type" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上级机构:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select size="small" disabled v-model="detailForm.fatherCompanyId" filterable placeholder="请选择"
            style="width: 262px;" @filter-method="getFatherAgenciesOptionData(name)">
            <el-option v-for="item in fatherCompanyIdData" :key="item.type" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="所在地区:" :label-width="formLabelWidth" class="formItemStyle">
          <!-- <el-cascader disabled v-model="detailForm.criCode" :options="options" @change="handleChange"></el-cascader> -->
          <el-input size="small" disabled v-model="detailForm.areaName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>
        <el-form-item label="详细地址:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input size="small" v-model="detailForm.address" autocomplete="off" style="width: 262px"
            disabled></el-input>
        </el-form-item>

        <el-form-item label="联系人姓名:" :label-width="formLabelWidth" class="formItemStyle" prop="contactName">
          <el-input size="small" disabled v-model="detailForm.contactName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号:" :label-width="formLabelWidth" class="formItemStyle" prop="telephoneNumber">
          <el-input size="small" disabled v-model="detailForm.telephoneNumber" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>
        <el-form-item label="是否认证:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select size="small" disabled v-model="detailForm.authenticationStatus" filterable placeholder="请选择"
            style="width: 262px;">
            <el-option v-for="item in authenticationStatusData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input size="small" disabled v-model="detailForm.responsiblePersonName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>
      </el-form>
      <!-- 详情结束 -->

      <!-- 分割线 -->
      <el-divider></el-divider>



      <!-- tab页 -->
      <el-tabs type="border-card" :value="logOnUser.unitType == 'system' ? 'super' : 'XJJG'">

        <!-- 超级管理员 -->
        <el-tab-pane name="super" v-if="logOnUser.unitType == 'system'">
          <span slot="label"><i class="el-icon-office-building"></i> 超级管理员</span>

          <div>

            <div v-if="superAdminUserData.length > 0">
              <el-table :data="superAdminUserData" style="width: 100%" class="menuTable"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                <el-table-column align="center" prop="account" label="用户账号">
                </el-table-column>
                <el-table-column align="center" prop="name" label="姓名">
                </el-table-column>


                <el-table-column align="center" prop="roleNames" label="角色">

                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.roleNames" placement="top-start">
                      <span>{{ scope.row.roleNames == null ? '—' : scope.row.roleNames.length > 8 ?
                        "..." + scope.row.roleNames.substring(scope.row.roleNames.length - 8,
                          scope.row.roleNames.length) : scope.row.roleNames }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>


                <el-table-column align="center" prop="status" label="创建时间">

                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="操作" width="160px" align="center">

                  <template slot-scope="scope">
                    <div class="textBtn">
                      <el-row>
                        <el-col class="el" :span="12">
                          <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                            @click="bindingUserAccount(scope.row)">替换</span>
                        </el-col>
                        <el-col class="el" :span="12">
                          <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                            @click="unbindingUserAccount(scope.row)">解绑</span>
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>

            </div>
            <!-- <div v-else style="margin: 20px;cursor: pointer;" @click="addSuperAdmin">
              暂未绑定超级管理员，点击绑定
            </div> -->
            <div v-else style="margin: 20px;cursor: pointer;">
              暂未绑定超级管理员
            </div>

          </div>
          <!-- 绑定超级管理员结束 -->
        </el-tab-pane>





        <!-- 下级机构列表 -->
        <el-tab-pane name="XJJG">
          <span slot="label"><i class="el-icon-office-building"></i> 下级机构</span>
          <div>
            <div>
              <el-input class="findValue" v-model="agencyQuery.name" placeholder="根据机关名称搜索"
                @keyup.enter.native="SouSuo2" clearable></el-input>
              <el-input style="width: 220px;" v-model="agencyQuery.responsiblePersonName" placeholder="根据负责人名称搜索"
                @keyup.enter.native="SouSuo2" clearable></el-input>
              <el-input class="findValue" v-model="agencyQuery.telephoneNumber" placeholder="根据手机号码搜索"
                @keyup.enter.native="SouSuo2" clearable></el-input>
              <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo2">查询</el-button>
              <el-button style="margin-top: 20px; margin-left: 15px" @click="reset2">重置</el-button>
            </div>

            <div>
              <el-table :data="agencyData" style="width: 100%" class="menuTable"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">


                <el-table-column align="center" prop="shortName" label="机构名称">
                </el-table-column>

                <el-table-column align="center" prop="responsiblePersonName" label="负责人">

                  <template slot-scope="scope">
                    <span>{{ scope.row.responsiblePersonName == null || scope.row.responsiblePersonName == '' ? '—' :
                      scope.row.responsiblePersonName }}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" prop="telephoneNumber" label="手机号码">

                  <template slot-scope="scope">
                    <span>{{ scope.row.telephoneNumber == null || scope.row.telephoneNumber == '' ? '—' :
                      scope.row.telephoneNumber }}</span>
                  </template>
                </el-table-column>


                <el-table-column align="center" prop="areaName" label="地址">

                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.areaName" placement="top-start">
                      <span>{{ scope.row.areaName == null || scope.row.areaName == '' ? '—' :
                        scope.row.areaName.length > 7 ?
                          "..." + scope.row.areaName.substring(scope.row.areaName.length - 7,
                            scope.row.areaName.length) : scope.row.areaName }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <el-table-column align="center" prop="createTime" label="创建时间">

                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime == null || scope.row.createTime == '' ? '—' :
                      scope.row.createTime }}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作" width="280px">

                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openDetailPage(scope.row)">详情</el-button>
                    <!-- <el-button type="primary" icon="el-icon-connection" size="mini"
                      @click="openBindingForm(scope.row)"></el-button>
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                      @click="echoValueForUpdate(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="deleteAgencyById(scope.row)"></el-button> -->
                  </template>
                </el-table-column>
              </el-table>

            </div>


            <div class="pageFooterFather">
              <!-- <el-pagination v-if="totalSize > pageSize" background layout="prev, pager, next" :total="totalSize"
                @current-change="handleCurrentChange" class="pageFooter">
              </el-pagination> -->
              <myPagination :total="total2" :pageNum="pageNum2" @PageChange="PageChange2"
                @pageSizeChange="pageSizeChange2">
              </myPagination>
            </div>
          </div>
        </el-tab-pane>
        <!-- 下级机构列表结束 -->


        <!-- 员工列表 -->
        <el-tab-pane name="YGLB">
          <span slot="label"><i class="el-icon-s-custom"></i> 员工列表</span>
          <div>
            <el-input class="findValue" v-model="userQuery.userAccount" placeholder="根据用户账号搜索"
              @keyup.enter.native="SouSuo3" clearable></el-input>
            <el-input class="findValue" v-model="userQuery.userName" placeholder="根据用户姓名搜索"
              @keyup.enter.native="SouSuo3" clearable></el-input>
            <el-cascader change-on-select :options="YGLBOptions" v-model="userQuery.userDept" :props="YGLBProps"
              placeholder="请选择部门" clearable @change="SouSuo3"></el-cascader>


            <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo3">查询</el-button>
            <el-button style="margin-top: 20px; margin-left: 15px" @click="reset3">重置</el-button>
            <div class="operation" style="margin-top: 20px;margin-left: 15px;">
              <el-button type="primary" @click="openInsertDialogForm">新增</el-button>
            </div>
          </div>

          <div>
            <el-table :data="userData" style="width: 100%" class="menuTable"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
              <el-table-column prop="account" align="center" label="用户账号">
              </el-table-column>
              <el-table-column prop="name" align="center" label="姓名">
              </el-table-column>

              <!-- <el-table-column prop="bindingPopulationPhoneNum" label="绑定手机号">
              </el-table-column> -->

              <el-table-column prop="departmentName" align="center" label="部门" width="200px">
              </el-table-column>
              <el-table-column prop="postName" align="center" label="岗位" width="200px">
              </el-table-column>
              <el-table-column prop="postName" align="center" label="是否主业" width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.isMainStaff == '1' ? '主业' : "兼职" }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" align="center" label="状态" width="80px">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == '0' ? '禁用' : "正常" }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150px" align="center">

                <template slot-scope="scope">

                  <!-- <el-button type="primary" icon="el-icon-edit" size="mini"
                    @click="openEditDialogForm(scope.row)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini"
                    @click="deleteStaffById(scope.row)"></el-button> -->
                  <div class="textBtn">
                    <el-row>
                      <el-col class="el" :span="12">
                        <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                          @click="openEditDialogForm(scope.row)">修改</span>
                      </el-col>
                      <el-col class="el" :span="12">
                        <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                          @click="deleteStaffById(scope.row)">删除</span>
                      </el-col>
                    </el-row>
                  </div>
                </template>
              </el-table-column>
            </el-table>

          </div>
          <myPagination :total="total3" :pageNum="pageNum3" @PageChange="PageChange3" @pageSizeChange="pageSizeChange3">
          </myPagination>
        </el-tab-pane>
        <!-- 员工列表结束 -->



        <!-- 地图 -->
        <el-tab-pane name="map">
          <span slot="label"><i class="el-icon-location"></i> 详细位置</span>
          <div class="mapStyle">
            <div id="container"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- tab页结束 -->


      <!-- 新增员工弹框 -->
      <el-dialog :title="insertForm.confirmType === 'insert' ? '添加员工:' : '修改员工信息:'" :visible.sync="dialogFormVisible"
        class="formStyle" width="1000px">
        <el-form :model="insertForm" :rules="insertRules" ref="insertForm">

          <el-row>

            <el-col :span="9">
              <el-form-item label="选择部门:" :label-width="formLabelWidth" class="formItemStyle">
                <el-cascader v-model="insertUserQuery.agencyDepartmentId" :options="depmentManageData" filterable
                  :props="BMprops" clearable @change="departmentChangeEvent"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="选择岗位:" :label-width="formLabelWidth" class="formItemStyle">
                <div class="block">
                  <el-select v-model="insertUserQuery.agencyPostId" clearable :disabled="agencyPostDisabled">
                    <el-option v-for="item in agencyPostListData" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否设置为主业:" :label-width="formLabelWidth" class="formItemStyle">
                <el-switch v-model="mainSwitch" active-color="#66b1ff" inactive-color="#aaa" @change="switchChange">
                </el-switch>
              </el-form-item>

            </el-col>
          </el-row>


        </el-form>
        <el-divider></el-divider>
        <div>
          <el-input class="findValue" v-model="insertUserQuery.userAccount" placeholder="用户账号"
            @keyup.enter.native="queryInsertUserList" clearable></el-input>
          <el-input class="findValue" v-model="insertUserQuery.userName" placeholder="用户姓名"
            @keyup.enter.native="queryInsertUserList" clearable></el-input>
          <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
            @click="queryInsertUserList">搜索</el-button>

        </div>
        <div class="abcd">
          <el-table :data="insertUserData" style="width: 100%; " class="menuTable" ref="addStaffTable"
            @selection-change="handleSelectionChange"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="account" label="用户账号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>

            <el-table-column prop="bindingPopulationPhoneNum" label="绑定手机号">
            </el-table-column>

            <!-- <el-table-column prop="departmentName" label="部门">

              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.departmentName" placement="top-start">
                  <span>{{ scope.row.departmentName == null ? '—' : scope.row.departmentName.length > 8 ?
      "..." + scope.row.departmentName.substring(scope.row.departmentName.length - 8,
        scope.row.departmentName.length) : scope.row.departmentName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="roleNames" label="岗位">

              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.roleNames" placement="top-start">
                  <span>{{ scope.row.roleNames == null ? '—' : scope.row.roleNames.length > 8 ?
      "..." + scope.row.roleNames.substring(scope.row.roleNames.length - 8,
        scope.row.roleNames.length) : scope.row.roleNames }}</span>
                </el-tooltip>
              </template>
            </el-table-column> -->
            <el-table-column prop="status" label="状态">

              <template slot-scope="scope">
                <span>{{ scope.row.status == '0' ? '禁用' : "正常" }}</span>
              </template>
            </el-table-column>


          </el-table>

        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="insertForm.confirmType == 'insert'" type="primary" @click="addStaff()">确
            定</el-button>
          <el-button v-if="insertForm.confirmType == 'update'" type="primary" @click="updateStaff()">确
            定</el-button>

        </div>
      </el-dialog>
      <!-- 新增员工弹框结束 -->


      <!-- 修改员工岗位弹窗 -->
      <el-dialog title="修改岗位" :visible.sync="xzgwdialogFormVisible" class="xzgwformStyle" width="850px">
        <el-form :model="UserPostData" :rules="UserPostRules" ref="xzgwForm">
          <el-row>
            <el-col :span="9">
              <el-form-item label="选择部门:" label-width="100px" class="formItemStyle" prop="department">
                <el-cascader style="width: 150px;" v-model="UserPostData.department" :options="depmentManageData"
                  filterable :props="BMprops" clearable @change="UserPostDepartmentChange"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="选择岗位:" label-width="100px" class="formItemStyle" prop="post">
                <div class="block">
                  <el-select :disabled="!UserPostData.department" style="width: 150px;" v-model="UserPostData.post"
                    clearable filterable>
                    <el-option v-for="item in agencyPostListData" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否设置为主业:" :label-width="formLabelWidth" class="formItemStyle">
                <el-switch v-model="mainSwitch" active-color="#66b1ff" inactive-color="#aaa"  @change="switchChange">
                </el-switch>
              </el-form-item>

            </el-col>
          </el-row>
          <el-form-item>
            <div style="display: flex;justify-content: flex-end;">
              <el-button type="info" @click="xzgwdialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="UpdateUserPost">修改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 选择超级管理员弹窗 -->
      <!-- <el-dialog :close-on-click-modal="false" class="dialogStyle" title="选择用户" :visible.sync="selectShow"
        width="600px">
        <el-divider></el-divider>
        <div style="padding: 0 20px;box-sizing: border-box">

          <div>
            <el-input clearable style="width: 180px;" v-model="popKey1" placeholder="根据用户账号查询"></el-input>
            <el-input clearable style="width: 150px;" v-model="popKey2" placeholder="根据姓名查询"></el-input>
            <el-button type="primary" @click="selectSouSuo">查询</el-button>
          </div>
          <div class="popTableStyle">
            <el-table ref="selectUnitPopTable" @current-change="selectChange" :data="selectData" style="width: 100%"
              height="250px" highlight-current-row>
              <el-table-column align="center" prop="account" label="用户账号">
              </el-table-column>
              <el-table-column align="center" prop="name" label="姓名">
              </el-table-column>
              <el-table-column align="center" prop="name" label="用户类型">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-divider></el-divider>
        <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
          <el-button @click="selectShow = false">取 消</el-button>
          <el-button type="primary" @click="selectOk">确
            定</el-button>
        </div>
      </el-dialog> -->
    </div>
  </div>
</template>





<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  getFatherAgencies,
  getDictionaryList,
  getInDetail,
  // bindingAU,
  // unbindingAU,
  getDepartmentHierarchically,
  getPostListByDepId,
  addStaff,
  getAddedUserList,
  deleteStaff,
  getBreadcrumbs,
  getAgencyStaffDetail,
  updateStaff,
  getShangJiJiGouList,
  getUserList,
  getCompanySubList,
  getUserMainStaff,
  mydeleteUserPost,
  mygetaddUserPost,
  myupdateUserPost,
  mygetUserListForBindingCU,
  myGetSuperDetail
} from "./institution";

export default {
  data() {
    return {
      // 选择超级管理员弹窗==============================
      selectShow: false,
      popKey1: '',
      popKey2: '',
      selectData: [],
      superAdminId: 0,
      superCache: {},
      //================================选择超级管理员弹窗
      YGLBOptions: [],
      YGLBProps: {
        value: 'id',
        label: 'name',
      },
      pageNum1: 1,
      pageSize1: 10,
      total1: 0,
      pageNum2: 1,
      pageSize2: 10,
      total2: 0,
      pageNum3: 1,
      pageSize3: 10,
      total3: 0,
      logOnUser: {},//登录用户信息
      activePost: {},//当前选中的某条岗位信息
      UserPostRules: {
        department: [
          { required: true, message: '请选择部门', trigger: 'change' },
        ],
        post: [
          { required: true, message: '请选择岗位', trigger: 'change' },
        ]
      },
      UserPostData: {},
      xzgwdialogFormVisible: false,
      activeUser: null,//点击机构下的员工列表修改时，获取该员工的id

      gwTableData: [],
      mainSwitch: true,//是否设置为主业
      BMprops: {
        checkStrictly: true,
        value: 'id',
        label: 'name',
      },
      //地图相关参数 START
      Marker: null,
      map: null,
      //地图相关参数 END
      options: [],
      fatherAgenciesOptionData: [],
      fatherCompanyIdData: [],
      superAdministratorIdData: [],
      authenticationStatusData: [
        { name: '未认证', id: '0' },
        { name: '已认证', id: '1' },
      ],
      updateStaffId: 0,
      dialogFormVisible: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      detailForm: {
        shortName: '',
        superAdministratorId: '',
        type: '',
        fatherCompanyId: '',
        criCode: '',
        contactName: '',
        telephoneNumber: '',
        authenticationStatus: '',
        criLng: '',
        criLat: '',
      },
      insertRules: {
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      operateType: 'insert',
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      fatherAgenciesOptionData: [],
      typeOptionData: [],
      agencyQuery: {
      },

      userQuery: {
        userAccount: "",
        userName: ""
      },
      insertUserQuery: {
        userAccount: "",
        userName: "",
        agencyDepartmentId: "",
        agencyPostId: "",
      },
      insertForm: {
        confirmType: 'insert',
      },
      breadcrumbsData: [], //面包屑数据
      agencyData: [], //下级机构数据
      userData: [], //已新增员工数据
      superAdminUserData: [], //待添加超级管理员的用户列表
      insertUserData: [], //待新增员工数据
      depmentManageData: [], //部门数据
      agencyPostListData: [], //岗位数据
      agencyPostDisabled: true, //岗位下拉框
      multipleSelection: [],
      pageNum: 0,
      pageSize: 10,
      totalSize: 0,
      agencyDetailObj: {},
    }
  },

  activated() {
    this.$set(this.userQuery, 'userName', '')
    this.$set(this.userQuery, 'userAccount', '')
    this.$set(this.userQuery, 'userDept', [])
    this.$set(this.agencyQuery, 'name', '')
    this.$set(this.agencyQuery, 'responsiblePersonName', '')
    this.$set(this.agencyQuery, 'telephoneNumber', '')

    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.getDepartmentHierarchically();
    this.getAgencyInfo(this.$route.query.id);
    this.operateType = 'binding'
    this.getAgencyList();

    this.queryAddedStaffList();
    //刚进入页面加载
    this.getFatherAgenciesOptionData("");
    //面包屑
    this.getBreadcrumbsData();


  },
  async mounted() {
    //初始化选项数据
    this.getAgencyTypeOptionData();


  },
  methods: {
    switchChange(e) {
      if(!e){
        this.$confirm('添加后本单位用户为兼职，无法进行公告资讯发布，审批等操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        
        }).catch(() => {
          this.mainSwitch = !this.mainSwitch 
        });
      }else{
        
      }
    },
    addSuperAdmin() {
      this.selectShow = true
      this.popKey1 = ''
      this.popKey2 = ''
      this.superCache = {}
      this.superAdminId = 0
      this.getReplaceSuperData()
    },
    // 超级管理员弹窗==============================
    selectChange(val) {
      console.log(val, '选中的');
      this.superCache = val
    },
    // async selectOk() {
    //   function isEmptyObject(obj) {
    //     return Object.keys(obj).length === 0 && obj.constructor === Object;
    //   }
    //   if (!this.superCache || isEmptyObject(this.superCache)) {
    //     this.selectShow = false
    //     return
    //   }
    //   this.$confirm('是否确认绑定?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {

    //     this.selectShow = false
    //     var instId = this.$route.query.id;
    //     var userId = this.superCache.id;

    //     bindingAU(instId, userId).then((res) => {
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '绑定成功',
    //           type: 'success'
    //         });
    //         this.getAgencyInfo(this.$route.query.id);
    //         this.selectShow = false

    //       } else {
    //         this.$message({
    //           message: res.message,
    //           type: "warning",
    //         });
    //       }
    //     });
    //   }).catch(() => {

    //   });

    // },
    selectSouSuo() {
      this.getReplaceSuperData()
    },
    // ====================================超级管理员弹窗

    PageChange2(e) {
      this.pageNum2 = e
      this.getAgencyList()
    },
    pageSizeChange2(e) {
      this.pageNum2 = 1
      this.pageSize2 = e
      this.getAgencyList()
    },
    handleCurrentChange() {

    },
    UpdateUserPost() { //新增岗位确认按钮
      this.$refs['xzgwForm'].validate(async (valid) => {
        if (valid) {
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let res3 = await myupdateUserPost({
              "id": this.activeUser.staffId, //员工id
              "postId": this.UserPostData.post, //修改后的岗位id
              "mainStaff": this.mainSwitch
            })
            if (res3.code == 200) {
              this.$message({
                message: '岗位修改成功',
                type: 'success'
              });
              this.xzgwdialogFormVisible = false
              this.queryAddedStaffList()
            } else {
              this.$message.error(res3.message);
            }

          }).catch(() => {

          });


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 定位详细坐标
    positioning(val) {

      // 设置中心点
      this.map.setCenter([val.lon, val.lat])

      // 设置高度
      this.map.setZoom([15])

      // 如果之前添加个散点那么就去除
      if (this.Marker != null) {
        this.Marker.remove()
        console.log('删除marker', this.Marker);
      }

      // 添加散点
      this.Marker = new AMap.Marker({
        position: new AMap.LngLat(val.lon, val.lat),
        title: val.title,
        anchor: 'bottom-center',
      })
      this.map.add(this.Marker);
    },
    ShowMap(val) {
      let that = this
      this.$nextTick(() => {
        // 如果地图为空 则初始化地图
        if (this.map == null) {
          AMapLoader.load({
            key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          })
            .then((AMap) => {
              that.map = new AMap.Map("container", {
                // 设置地图容器id
                // viewMode: "3D", // 是否为3D地图模式
                // zoom: 11, // 初始化地图级别
                // center: [116.397428, 39.90923], // 初始化地图中心点位置
              });
              that.positioning(val)
            })
            .catch((e) => {
              console.log(e);
            });
        } else {
          this.positioning(val)
        }
      })
    },
    handleChange() {

    },


    /**
     *  上一页
     */
    goBack() {
      this.$router.push({ path: '/institution/inManagement' });
    },

    /**
     * 获取上级机关列表
     */
    async getFatherAgenciesOptionData(name) {
      // 上级机构信息
      let ShangJiJiGouList = await getShangJiJiGouList()
      this.fatherCompanyIdData = []
      console.log(ShangJiJiGouList, '上级机构列表');
      ShangJiJiGouList.forEach(el => {
        this.fatherCompanyIdData.push({
          name: el.shortName,
          type: el.id
        })
      })
      this.fatherCompanyIdData.unshift({
        name: '无',
        type: 0
      })
      // 机构type类型获取
      this.fatherAgenciesOptionData = [
        { name: "物业公司", type: '1' },
        { name: "其他机构", type: '2' }
      ];
      // 上级机构信息
      // this.fatherCompanyIdData = [
      //   { name: "1号机构", type: 0 },
      //   { name: "2号机构", type: 2 }
      // ];
      // 获取管理员信息
      this.superAdministratorIdData = [
        { name: '超级管理员', type: 0 },
        { name: '普通管理员', type: 1 }
      ]
    },


    /**
     * 获取类型字典数据
     */
    getAgencyTypeOptionData() {
      getDictionaryList("agency_type").then((res) => {
        this.typeOptionData = res.data;
      })
    },



    // 获取机构详情
    getAgencyInfo(id) {
      getInDetail(id).then((res) => {
        console.log(res, '机构详情');
        this.agencyDetailObj = res
        this.queryInsertUserList();
        this.querysuperAdminUserList(res.superAdministratorId);
        this.detailForm = {
          shortName: res.shortName,
          superAdministratorId: res.superAdministratorId,
          superAdministratorName: res.superAdministratorName,
          type: res.type,
          fatherCompanyId: res.fatherCompanyId,
          criCode: res.criCode,
          contactName: res.contactName,
          telephoneNumber: res.telephoneNumber,
          authenticationStatus: res.authenticationStatus,
          areaName: res.areaName,
          address: res.address,
          criLng: res.criLng,
          criLat: res.criLat,
          responsiblePersonName: res.responsiblePersonName
        }
        console.log(this.detailForm);
        let req = {
          lon: this.detailForm.criLng,
          lat: this.detailForm.criLat,
          title: this.detailForm.shortName
        }
        console.log(req, '地图信息');
        if (req.lat) {
          this.ShowMap(req)
        }
      })
    },


    UserPostDepartmentChange() { //用户岗位列表的查询岗位
      this.$set(this.UserPostData, 'post', '')
      getPostListByDepId(
        this.UserPostData.department[this.UserPostData.department.length - 1],
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
    },
    getReplaceSuperData() {
      getUserList(
        {
          "unitType": "system", //必传 机关：agency  机构：company 
          "unitId": 0, //单位id
          "unitName": '',
          "account": this.popKey1, //账号
          "name": this.popKey2, //名字
          "status": 1,
          "pageNum": 1,
          "pageSize": 10000,
        }
      ).then((res) => {
        let arr = []
        res.list.forEach(el => {
          if (el.unitType == 'system' || el.unitType == 'company') {
            arr.push(el)
          }
        })
        this.selectData = arr
        this.selectData.forEach((el, i) => {
          if (el.id == this.superAdminId) {
            this.$nextTick(() => {
              this.$refs.selectUnitPopTable.setCurrentRow(this.selectData[i])
            })
          }
        })
      });
      // getAddedUserList(
      //   this.$route.query.id,
      //   this.popKey1,
      //   this.popKey2,
      //   1,
      //   100000
      // ).then((res) => {
      //   console.log(res, '弹窗已添加员工列表');
      //   if (res.code == 200) {
      //     this.selectData = res.data.list;
      //     this.selectData.forEach((el, i) => {
      //       if (el.id == this.superAdminId) {
      //         this.$nextTick(() => {
      //           this.$refs.selectUnitPopTable.setCurrentRow(this.selectData[i])
      //         })
      //       }
      //     })
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // });
    },
    bindingUserAccount(row) {
      this.selectShow = true
      this.popKey1 = ''
      this.popKey2 = ''
      this.superCache = {}
      this.superAdminId = row.id
      this.getReplaceSuperData()

    },
    // unbindingUserAccount(row) {
    //   this.$confirm('是否解除绑定?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     var userId = row.id;
    //     var instId = this.$route.query.id;
    //     unbindingAU(instId, userId).then((res) => {
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '解绑成功',
    //           type: 'success'
    //         });
    //         this.$nextTick(() => {
    //           // this.detailForm.superAdministratorName = "无";
    //           this.getAgencyInfo(instId)
    //         })

    //       } else {
    //         this.$message({
    //           message: res.message,
    //           type: "warning",
    //         });
    //       }
    //     });
    //   }).catch(() => {

    //   });

    // },
    SouSuo2() {
      this.pageNum2 = 1
      this.getAgencyList()
    },
    reset2() {
      this.$set(this.agencyQuery, 'name', '')
      this.$set(this.agencyQuery, 'responsiblePersonName', '')
      this.$set(this.agencyQuery, 'telephoneNumber', '')
      this.pageNum2 = 1
      this.getAgencyList()
    },
    //按条件查询菜单列表
    getAgencyList() {
      // responsiblePersonName telephoneNumber
      getCompanySubList({
        "name": this.agencyQuery.name,
        "responsiblePersonName": this.agencyQuery.responsiblePersonName,
        "telephoneNumber": this.agencyQuery.telephoneNumber,
        "pid": this.$route.query.id,
        "pageNum": this.pageNum2,
        "pageSize": this.pageSize2
      }).then((res) => {
        console.log(res, '下级机构');
        this.agencyData = res.list
        this.total2 = res.total;
      });

    },
    //打开账号绑定窗口 并回显账号信息
    openDetailPage(row) {
      var id = row.id;
      this.$router.replace({
        path: '/institution/institutionDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },
    //打开添加员工弹框
    openInsertDialogForm() {
      this.agencyPostListData = []
      this.mainSwitch = true
      this.dialogFormVisible = true
      this.insertForm.confirmType = 'insert';
      //查询待添加的用户列表
      this.queryInsertUserList();
      // this.getDepartmentHierarchically();
      this.insertUserQuery.agencyDepartmentId = "";
      this.insertUserQuery.agencyPostId = "";
    },
    //打开员工修改弹框
    async openEditDialogForm(row) {


      //2024/03/06最新版本
      this.activeUser = row
      if (row.isMainStaff == 1) {
        this.mainSwitch = true
      }
      if (row.isMainStaff == 0) {
        this.mainSwitch = false
      }
      let res = await getAgencyStaffDetail(row.staffId)
      this.$set(this.UserPostData, 'department', res.data[0].deptId)
      getPostListByDepId(
        res.data[0].deptId
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
      this.$set(this.UserPostData, 'post', res.data[0].postId)
      this.xzgwdialogFormVisible = true
    },
    SouSuo3() {
      this.pageNum3 = 1
      this.queryAddedStaffList()
    },
    reset3() {
      this.$set(this.userQuery, 'userAccount', '')
      this.$set(this.userQuery, 'userName', '')
      this.$set(this.userQuery, 'userDept', [])

      this.pageNum3 = 1
      this.queryAddedStaffList()
    },
    PageChange3(e) {
      this.pageNum3 = e
      this.queryAddedStaffList()
    },
    pageSizeChange3(e) {
      this.pageNum3 = 1
      this.pageSize3 = e
      this.queryAddedStaffList()
    },
    //按条件查询账号列表
    queryAddedStaffList() {
      if (this.userQuery.userDept.length == 0) {
        this.userQuery.userDept = ['']
      }
      getAddedUserList({
        depId: this.userQuery.userDept[this.userQuery.userDept.length - 1],
        companyId: this.$route.query.id,
        account: this.userQuery.userAccount,
        name: this.userQuery.userName,
        pageNum: this.pageNum3,
        pageSize: this.pageSize3
      }).then((res) => {
        console.log(res, '已添加员工列表');
        if (res.code == 200) {
          this.userData = res.data.list;
          this.total3 = res.data.total;
        } else {
          this.$message.error(res.message)
        }
      });
    },

    //按条件查询账号列表
    querysuperAdminUserList(userId) {// 超级管理员
      // userId = 27
      if (userId == 0 || !userId) {
        this.superAdminUserData = []
        return
      }

      myGetSuperDetail(userId).then((res) => {
        if (res.code == 200) {
          console.log(res, 'qwdqdqw');
          let { account, name, createTime, id, roleNames } = res.data
          this.superAdminUserData = []
          this.superAdminUserData.push({
            account, name, createTime, id, roleNames
          })
        } else {
          this.$message.error(res.message)
        }
      });
      // var status = '1';
      // mygetUserListForBindingCU({
      //   // "unitType": "system", //必传 机关：agency  机构：company 
      //   // "unitId": 0, //单位id
      //   "name": this.superAdminQuery.userName, //名字
      //   "account": this.superAdminQuery.userAccount, //账号
      //   // "status": status,
      //   "pageNum": this.pageNum1,
      //   "pageSize": this.pageSize1,
      // }).then((res) => {
      //   if (res.code == 200) {
      //     this.superAdminUserData = res.data.list;
      //     this.total1 = res.data.total;
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // });
    },
    //按条件查询账号列表
    queryInsertUserList() {
      var status = '1';
      getUserList({
        "unitType": "company", //必传 机关：agency  机构：company 
        "unitId": this.$route.query.id, //单位id
        "unitName": this.agencyDetailObj.shortName,
        "name": this.insertUserQuery.userName, //名字
        "account": this.insertUserQuery.userAccount, //账号
        "status": status
      }).then((res) => {
        console.log(res, 'qwdqqwd');
        this.insertUserData = res.list;
        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.totalSize = res.total;
      });
    },
    //查询部门
    getDepartmentHierarchically() {
      getDepartmentHierarchically({
        "unitType": "company", //必传 机关：agency  机构：company 
        "unitId": this.$route.query.id //单位id
      }).then((res) => {
        console.log(res, '部门列表');
        function processNestedArray(data) { //如果children长度为0，则设置为undefined
          // 遍历数组中的每个对象  
          data.forEach(item => {
            // 如果当前对象的children数组长度为0，则将其设置为undefined  
            if (item.children && item.children.length === 0) {
              item.children = undefined;
            }
            // 如果当前对象还有子对象（即children数组不为空），则递归处理子对象  
            if (item.children) {
              processNestedArray(item.children);
            }
          });
          return data;
        }
        this.depmentManageData = processNestedArray(res.data);
        this.YGLBOptions = processNestedArray(res.data);
      });
    },
    //查询岗位
    getPostListByDepId() {
      getPostListByDepId(
        this.insertUserQuery.agencyDepartmentId[this.insertUserQuery.agencyDepartmentId.length - 1],
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
    },
    //部门选择变动事件
    departmentChangeEvent() {
      if (this.insertUserQuery.agencyDepartmentId.length > 0) {
        this.agencyPostDisabled = false;
      } else {
        this.agencyPostDisabled = true;
      }
      this.getPostListByDepId();
      this.insertUserQuery.agencyPostId = ''

    },
    handleSelectionChange(val) {
      if (val.length == 0) return
      if (val.length > 1) {
        this.$refs.addStaffTable.clearSelection(); //取消所有选中
        this.$refs.addStaffTable.toggleRowSelection(val[val.length - 1], true);
      }
      this.multipleSelection = [val[val.length - 1]]
    },
    //添加员工
    async addStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      if (this.mainSwitch) {  //如果勾选设置为主业的话
        let res = await getUserMainStaff(this.multipleSelection[0].id)//先判断该用户有没有主业
        if (res.data != 0) { //有主业
          this.$confirm('当前用户已有主业，是否修改?', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.adddddddStaff(true)
          }).catch((action) => {
            if (action === 'cancel') {
              console.log('点击了兼职')
              this.adddddddStaff(false)
              return
            }
            if (action === 'close') {
              console.log('点击了关闭')
              return
            }
          });
        } else {
          this.adddddddStaff(true)
        }
      } else {//如果不勾选设置为主业的话
        this.adddddddStaff(false)
      }
    },
    adddddddStaff(mainStaff) {
      addStaff({
        "companyId": this.$route.query.id, //机构id 必填
        "userId": this.multipleSelection[0].id, //用户id  必填
        "postId": this.insertUserQuery.agencyPostId, //岗位id  必填
        "mainStaff": mainStaff, //是否设置为主岗位，true是
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '添加员工成功',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.queryAddedStaffList();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //删除员工
    deleteStaffById(row) {
      console.log(row);
      this.$confirm("确认删除该员工吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        deleteStaff(row.staffId, row.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.queryAddedStaffList();
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });

    },

    //查询面包屑数据
    getBreadcrumbsData() {
      console.log(this, '??????');
      var agencyId = this.$route.query.id;

      getBreadcrumbs(agencyId).then((res) => {
        console.log(res, '面包屑数据');
        let arr = []
        res.forEach(el => {
          if (el != null) {
            arr.push(el)
          }
        })
        this.breadcrumbsData = arr;
      });

    },

    tiktak(id) {
      this.$router.replace({
        path: '/institution/institutionDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },
    //好像没用着
    getAgencyStaffDetail(staffId) {
      getAgencyStaffDetail(staffId, this.$route.query.id).then((res) => {
        if (res.code == 200) {
          var agencyStaff = res.data;
          this.insertUserQuery.agencyDepartmentId = eval('([' + agencyStaff.departmentIds + '])');
          this.insertUserQuery.agencyPostId = eval('([' + agencyStaff.postIds + '])');
          var selection = eval('([' + agencyStaff.userId + '])');
          this.getPostListByDepId();
          this.agencyPostDisabled = false;
          this.insertUserData.forEach((item) => {
            selection.forEach((staff) => {
              if (item.id == staff) {
                this.$nextTick(() => {
                  //设置当前用户高亮
                  this.$refs.addStaffTable.clearSelection();
                  this.$refs.addStaffTable.toggleRowSelection(item, true);
                })
              }
            })
          });


        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });

    },

    updateStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;

      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      var tempUserId = "";
      if (this.multipleSelection) {


        if (this.multipleSelection.length > 1) {
          this.$message({
            message: '只能选一个账号进行修改',
            type: "warning",
          });
          return;
        }


        this.multipleSelection.forEach(row => {
          tempUserId = tempUserId + "," + row.id
        });
        var userId = tempUserId.substring(1)



        updateStaff(this.updateStaffId, agencyId, userId, depIds, postIds).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.$nextTick(() => {
              this.queryAddedStaffList();
            })

          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      }
    },



  }
};
</script>

<style lang="less" scoped>
.abcd {
  /deep/ .el-table__header-wrapper {
    .el-table-column--selection {
      .cell {
        display: none;
      }
    }
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }

    .el-dialog__footer {
      padding: 0;
    }
  }
}

.popTableStyle {
  margin-top: 20px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #efefef;
      }
    }

    .el-table__body tr.current-row>td.el-table__cell {
      background-color: #409eff;

      .cell {
        color: white;
        font-weight: 600;
      }
    }
  }
}



.mapStyle {
  height: 350px;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }
}

.wholePage {
  margin: 20px 0;

  /deep/ .el-form-item {
    margin: 0;
  }
}

.breadcrumbs {
  margin-top: 20px;
  margin-left: 13px;
  height: 50%;
}

.menuTable {
  margin-top: 40px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}


.formStyle {
  width: 1780px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}


.birthdayDateItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}
</style>